<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>

<head>
    <title>Test Page - CheckboxListWidget</title>
	
	<style type="text/css">
        div.content
		{
            background-color:#000000;
            border:1px solid #333333;
            color:#00EE00;
            display:block;
			float: left;
            margin-right:1em;
            overflow:auto;
            padding: 0.5em;
            width:200px;
        }

		a.focus,
		select.focus,
		textarea.focus,
		input.focus
		{
			border: 1px red solid;
		}

		.list
		{
			border: 1px solid #333;
			overflow-y: scroll;
			width: 30em;
		}

		.list ul
		{
			margin: 0;
			padding: 0;
		}

		.list li
		{
			list-style: none;
			line-height: 1.6em;
		}
    </style>
</head>

<body id="project">

	<h1>Test Page - CheckboxListWidget</h1>

	<p>Below are two identical widgets, one using YUI 2 and one using YUI 3.</p>

	<div id="content">

		<h3>Example 1: Checkbox List Using Y2</h3>
		<div class="list" id="checkbox-list-y2" style="display:none;"></div>
		<p id="checkbox-value-y2"></p>
		<input class="button" id="checkbox-render-y2" type="button" value="Render"/>

		<h3>Example 2: Checkbox List Using Y3</h3>
		<div class="list" id="checkbox-list-y3" style="display:none;"></div>
		<p id="checkbox-value-y3"></p>
		<input class="button" id="checkbox-render-y3" type="button" value="Render"/>

	</div>

    <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui.js"></script>
    <script type="text/javascript" src="../assets/js/library.js"></script>
    <script type="text/javascript" src="../assets/js/widget/CheckboxList.js"></script>
    <script type="text/javascript" src="../assets/js/widget/CheckboxList_Y3.js"></script>
	<script type="text/javascript">YUI({filter:'raw'}).use('node', 'checkboxList', function(Y)
	{
		var Node = Y.Node;

		var checkboxData = [
			{id: "checkbox-1.1", label: "checkbox 1", value: "1.1", isChecked: false},
			{id: "checkbox-1.2", label: "checkbox 2", value: "1.2", isChecked: false},
			{id: "checkbox-1.3", label: "checkbox 3", value: "1.3", isChecked: false},
			{id: "checkbox-1.4", label: "checkbox 4", value: "1.4", isChecked: false},
			{id: "checkbox-1.5", label: "checkbox 5", value: "1.5", isChecked: false}
		],
			checkboxData2 = [
			{id: "checkbox-1.1-2", label: "checkbox 1", value: "1.1", isChecked: false},
			{id: "checkbox-1.2-2", label: "checkbox 2", value: "1.2", isChecked: false},
			{id: "checkbox-1.3-2", label: "checkbox 3", value: "1.3", isChecked: false},
			{id: "checkbox-1.4-2", label: "checkbox 4", value: "1.4", isChecked: false},
			{id: "checkbox-1.5-2", label: "checkbox 5", value: "1.5", isChecked: false}
		];

		var checkboxListWidgetY2 = new Core.Widget.CheckboxList("checkbox-list-y2");
		var checkboxListWidgetY3 = new Y.CheckboxList(
		{
			node: "#checkbox-list-y3",
			json: checkboxData2
		});

		Y.get('#checkbox-render-y2').on('click', function()
		{
			Y.get('#checkbox-value-y2').setContent('');
			checkboxListWidgetY2.render(checkboxData);
		});
		Y.get('#checkbox-render-y3').on('click', function()
		{
			Y.get('#checkbox-value-y3').setContent('');
			checkboxListWidgetY3.render();
			checkboxListWidgetY3.show();
		});

		checkboxListWidgetY2.subscribe(Core.Widget.CheckboxList.CE_ONCHECKED, function()
		{
			Y.get('#checkbox-value-y2').setContent(decodeURIComponent(checkboxListWidgetY2.serialize()));
		});

		checkboxListWidgetY3.subscribe(Core.Widget.CheckboxList.CE_ONCHECKED, function()
		{
			Y.get('#checkbox-value-y3').setContent(decodeURIComponent(checkboxListWidgetY3.serialize()));
		});
	});</script>
</body>
</html>